<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
	

	<title>人人有嘢讲</title>
	<link rel="stylesheet" type="text/css" href="{$_C.hy_path}css/car/yuyin.css">

	<!--[if lt IE 9]>
	  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>

	<body>
		<div class="container">
			<div class="talk-top">
				<div class="tx_outbox">
					<div class="out_box">
						<img src="{$_C.hy_path}images/car/1.png" alt="">
					</div>
					<div class="touxiamg">
						<img src="{$info.headimgurl}" alt="" width="100%">
					</div>
				</div>
				<div class="title">
					<img src="{$_C.hy_path}images/car/p5title.png" alt="">
				</div>
				<div class="clear"></div>
				<div class="talk-info">
					<img src="{$_C.hy_path}images/car/p5info.png" alt="">
				</div>
			</div>
			<div class="talk-content">
				<img src="{$_C.hy_path}images/car/talkbg.png" alt="">
				<div class="talk-list">
					<div class="talk-item">
						<div class="pic">
							<img class="touxiang" src="{$_C.hy_path}images/car/yuyin1.png" alt="">
							<div class="talkbg">
								<img src="{$_C.hy_path}images/car/talk.png" alt="">
								<div class="ba"></div>
								<audio style="display:none" id="talk1" src="{$_C.hy_path}images/car/jx.wav"></audio>
							</div>
						</div>
						<p class="talk-time"><span class="miao">10</span>''<!-- <span class="talk-time-det">18:55</span> --></p>
					</div>
					<div class="talk-item talk-item-r">
						<div class="pic">
							<img class="touxiang" src="{$_C.hy_path}images/car/yuyin2.png" alt="">
							<div class="talkbg">
								<img src="{$_C.hy_path}images/car/talk2.png" alt="">
								<div class="ba"></div>
								<audio style="display:none" id="talk2" src="{$_C.hy_path}images/car/mh.wav"></audio>
							</div>
						</div>
						 <p class="talk-time"><span class="miao">10</span>''<!-- <span class="talk-time-det">18:55</span> --></p> 
					</div>
					<div class="talk-item">
						<div class="pic">
							<img class="touxiang" src="{$_C.hy_path}images/car/yuyin3.png" alt="">
							<div class="talkbg">
								<img src="{$_C.hy_path}images/car/talk3.png" alt="">
								<div class="ba"></div>
								<audio style="display:none" id="talk3" src="{$_C.hy_path}images/car/gg.wav"></audio>
							</div>
						</div>
						<p class="talk-time"><span class="miao">10</span>''<!-- <span class="talk-time-det">18:55</span> --></p> 
					</div>
					

				</div>
			</div>
		</div>
		
		<script src="{$_C.hy_path}/js/zepto.min.js"></script>
		<script>
		$(document).ready(function () {
			var talkshow = null,flag = 0;
			$('.talkbg').click(function(){
				var $_this = $(this);
				var talktime = $_this.parent().next().find('.miao').text() * 1000;
				var talkid = $_this.find('.ba').next().attr('id');
				var lastTalkshow = talkshow;
				if(talkshow != null){
					talkshow.pause();
				}
				talkshow = document.getElementById(talkid);
				if(lastTalkshow == talkshow && flag == 1){
					talkshow.pause();
					$_this.find('.ba').removeClass('baplay');
					flag = 0;
				}else {
					talkshow.play();
					$_this.find('.ba').addClass('baplay');
					flag = 1;
				}
				console.log(flag);
				$_this.parent().parent().siblings('.talk-item').find('.ba').removeClass('baplay');
				setTimeout(function(){
					$_this.find('.ba').removeClass('baplay');
				}, talktime)
			})
		});
		</script>
		{include file="../Common/g4-share-train.html"}
	</body>
</html>
